<template>
    <div>
        
    <div class="contentpanel" style="height: calc(100vh);">

        <!-- 弹窗暗色背景 -->
        <div class="v-modal" style="z-index: 2022;" v-if="is_adjust||is_detail||is_reset"></div>
        <!-- /弹窗暗色背景 -->


        <!-- 用户积分详情 -->
        <div 
        class="el-dialog__wrapper dialog-dep-user-info fixed" 
        id="dialogEditUser" 
        style="z-index: 2026;"
        v-if="is_detail">
            <div class="el-dialog__wrapper fixed point" style="z-index: 2079;">
                <div class="el-dialog el-dialog--center user_integral_dialog" style="margin-top: 15vh;">
                    <div class="el-dialog__header">
                        <span class="el-dialog__title">积分详情</span>
                        <button type="button" @click.prevent="is_detail=''" aria-label="Close" class="el-message-box__headerbtn">
                            <i class="glyphicon glyphicon-remove" style="color: #909399;"></i>
                        </button>
                    </div>
                    <div class="el-dialog__body">
                        <div class="point-top">
                            <div class="left">
                                <img src="" alt="无头像">
                                <div class="left-user-data">
                                    <span class="name">{{userinfo.name}}</span> 
                                    <span class="depName">{{userinfo.dep.dep_name}}</span> 
                                    <span class="userName">{{userinfo.name}}</span>
                                </div>
                            </div>
                            <div class="right">
                                <span class="right-top">
                                    <span class="point-box">积分:</span>
                                    <span class="point-num">{{userinfo.integral}}</span>
                                </span>
                            </div>
                        </div>
                        <div class="point-content">
                            <div class="el-table el-table--fit el-table--enable-row-hover"
                                style="width: 100%; height: 100%;">
                                <div class="hidden-columns">
                                </div>
                                <div class="el-table__header-wrapper">
                                    <table 
                                        class="el-table__header">
                                        <colgroup>
                                            <col name="el-table_3_column_20" width="180">
                                            <col name="el-table_3_column_21" width="200">
                                            <col name="el-table_3_column_22" width="50">
                                            <col name="el-table_3_column_23" width="90">
                                            <col name="gutter" width="0">
                                        </colgroup>
                                        <thead class="has-gutter">
                                            <tr class="">
                                                <th colspan="1" rowspan="1" class="el-table_3_column_20 is-leaf">
                                                    <div class="cell">时间</div>
                                                </th>
                                                <th colspan="1" rowspan="1" class="el-table_3_column_21 is-leaf">
                                                    <div class="cell">事件</div>
                                                </th>
                                                <th colspan="1" rowspan="1" class="el-table_3_column_22 is-leaf">
                                                    <div class="cell">类型</div>
                                                </th>
                                                <th colspan="1" rowspan="1" class="el-table_3_column_23 is-right   is-leaf">
                                                    <div class="cell">积分变动</div>
                                                </th>
                                                <th class="gutter" style="width: 0px; display: none;">
                                                </th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                                <div class="el-table__body-wrapper is-scrolling-none"
                                    style="height: 60px;" v-show="user_detail">
                                    <table class="el-table__body" v-for="det in user_detail">
                                        <colgroup>
                                            <col name="el-table_3_column_20" width="180">
                                            <col name="el-table_3_column_21" width="200">
                                            <col name="el-table_3_column_22" width="50">
                                            <col name="el-table_3_column_23" width="90">
                                        </colgroup>
                                        <tbody>
                                            <tr class="el-table__row">
                                                <td rowspan="1" colspan="1" class="el-table_3_column_20  ">
                                                    <div class="cell el-tooltip">
                                                        {{det.create_time}}
                                                    </div>
                                                </td>
                                                <td rowspan="1" colspan="1" class="el-table_3_column_21  ">
                                                    <div class="cell el-tooltip">
                                                        {{det.incident}}
                                                    </div>
                                                </td>
                                                <td rowspan="1" colspan="1" class="el-table_3_column_22  ">
                                                    <div class="cell el-tooltip">
                                                        <span>{{det.integral_type}}</span>
                                                    </div>
                                                </td>
                                                <td rowspan="1" colspan="1" class="el-table_3_column_23 is-right ">
                                                    <div class="cell el-tooltip">
                                                        <span style="color: rgb(254, 133, 69);">
                                                            {{det.integral_change}}
                                                        </span>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="el-table__empty-block" v-show="user_detail==''">
                                        <span class="el-table__empty-text">
                                            暂无数据
                                        </span>
                                    </div>
                                </div>
                                <div class="el-table__column-resize-proxy" style="display: none;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /用户积分详情 -->

        <!-- 调整积分 -->
        <div 
            class="el-dialog__wrapper dialog-dep-user-info fixed" 
            id="dialogEditUser" 
            style="z-index: 2026;"
            v-if="is_adjust">
            <div class="el-dialog__wrapper dialog-tree fixed" style="z-index: 2055;">
                <div class="el-dialog el-dialog--center adjustment-dialog" style="width: 440px; margin-top: 15vh;">
                    <div class="el-dialog__header">
                        <span class="el-dialog__title" v-if="is_many==false">调整</span>
                        <span class="el-dialog__title" v-else>批量调整</span>
                        <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                            <i class="el-dialog__close el-icon el-icon-close"></i>
                        </button>
                    </div>
                    <div class="el-dialog__body">
                        <div style="margin-left:80px;">
                            <span>调整幅度：</span> 
                            <div class="el-select select-box">
                                <select v-model="num_state" class="el-input el-input--suffix">
                                    <option value="1">增加</option>
                                    <option value="2">减少</option>
                                </select>
                            </div> 
                            <div class="el-input">
                                <input type="text" autocomplete="off"
                                    maxlength="3" class="el-input__inner"
                                    v-model="number">
                            </div> 积分
                            <div class="error-box" v-show="message">请检查输入值 (范围：1-999的整数)</div>
                        </div>
                    </div>
                    <div class="el-dialog__footer">
                        <span class="dialog-footer">
                            <button @click.prevent="is_adjust=''" type="button" class="el-button el-button--default">
                                <span>取 消</span>
                            </button>
                            <button type="button" v-if="is_many==false"
                             @click.prevent="IntegralRegulator()" class="el-button el-button--primary">
                                <span>确 定</span>
                            </button>
                            <button type="button" v-else
                             @click.prevent="ManyIntegralRegulator()" class="el-button el-button--primary">
                                <span>确 定</span>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- /调整积分 -->

        <!-- 导出表格 -->
        <div tabindex="-1" role="dialog" aria-modal="true"
         aria-label="批量导出" class="el-message-box__wrapper" v-show="is_upload"
          style="z-index: 2054;">
            <div class="el-message-box operation-warning el-message-box--center">
                <div class="el-message-box__header">
                    <div class="el-message-box__title">
                        <div class="el-message-box__status el-icon-warning"></div>
                        <span>批量导出</span>
                    </div>
                    <button type="button" aria-label="Close" class="el-message-box__headerbtn">
                        <i class="el-message-box__close el-icon-close"></i>
                    </button>
                </div>
                <div class="el-message-box__content">
                    <div class="el-message-box__message">
                        <p>表格以导出完成，是否下载？</p>
                    </div>
                    <div class="el-message-box__input" style="display: none;">
                        <div class="el-input">
                            <input type="text" autocomplete="off" class="el-input__inner">
                        </div>
                        <div class="el-message-box__errormsg" style="visibility: hidden;"></div>
                    </div>
                </div>
                <div class="el-message-box__btns">
                    <button type="button" @click.prevent="is_upload=''"
                     class="el-button el-button--default el-button--small cancel">
                        <span>取消</span>
                    </button>
                    <a class="url_a" href="blob:http://localhost:8080/0ead79dc-1896-4a53-b1f1-dfbafff4e953" download="学生成绩表.xlsx" @click="is_upload=''">
                    <button type="button" class="el-button el-button--default el-button--small el-button--primary success">
                        <span>确定</span>
                    </button>
                    </a>
                </div>
            </div>
        </div>
        <!-- /导出表格 -->

        <!-- 积分清零 -->
        <div tabindex="-1" role="dialog"
         aria-modal="true" aria-label="积分清零"
         class="el-dialog__wrapper dialog-dep-user-info fixed"  style="z-index: 2055;"
         v-if="is_reset">
        <div class="el-dialog--center">
            <div class="el-message-box operation-warning el-message-box--center">
                <div class="el-message-box__header">
                    <div class="el-message-box__title">
                        <div class="el-message-box__status el-icon-warning"></div>
                        <span>积分清零</span>
                    </div>
                </div>
                <div class="el-message-box__content">
                    <div class="el-message-box__message" v-if="user_ids.length==0">
                        <p>请确认是否将全部人员的积分清零？</p>
                    </div>
                    <div class="el-message-box__message" v-else="user_ids">
                        <p>请确认是否将当前选中人员的积分清零？</p>
                    </div>
                    <div class="el-message-box__input" style="display: none;">
                        <div class="el-input">
                            <input type="text" autocomplete="off" class="el-input__inner">
                        </div>
                        <div class="el-message-box__errormsg" style="visibility: hidden;"></div>
                    </div>
                </div>
                <div class="el-message-box__btns">
                    <button @click="is_reset=''" type="button"
                     class="el-button el-button--default el-button--small cancel">
                        <span>取消</span>
                    </button>
                    <button @click.prevent="reset()" type="button"
                     class="el-button el-button--default el-button--small el-button--primary confirm">
                        <span>确定</span>
                    </button>
                </div>
            </div>

        </div>
        </div>
        <!-- /积分清零 -->



        <div class="row" style="height:100%;">
            <div class="table-responsive">
                <div class="el-table el-table--fit el-table--border el-table--scrollable-x el-table--enable-row-transition" 
                style="width: 100%; height: 100%;">
                    <div class="el-table__header-wrapper">
                        
                        <table class="" style="width:97%; margin:0 auto;">
                            <thead>
                            <tr>
                                <td colspan="7">
                                    <div class="toolbar-left fl fit_config_container">
                                        <button type="button" @click.prevent="many()"
                                        class="el-button fit_config_btn el-button--primary el-button--small is-plain">
                                            <i class="icon-a_operate_adjust"></i>
                                            <span>批量调整</span>
                                        </button>
                                        <button type="button"
                                        class="el-button fit_config_btn el-button--primary el-button--small is-plain" @click="upload()">
                                            <i class="icon-a_btn_derivation"></i>
                                            <span>导出</span>
                                        </button>
                                            <!-- <a class="url_a" href="blob:http://localhost:8080/0ead79dc-1896-4a53-b1f1-dfbafff4e953" download="学生成绩表.xls">
                                            导出表格
                                            </a> -->
                                        <button type="button" @click.prevent="is_reset=1"
                                        class="el-button fit_config_btn el-button--primary el-button--small is-plain">
                                            <i class="icon-a_bth_reset"></i>
                                            <span>积分清零</span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            </thead>
                            </table>
                            
                            <table class="upload_table" style="width:97%; margin:0 auto;">
                            <tr style="height:54px;">
                                <th style="width:80px;">
                                    <input type='checkbox' v-model='checked' @click='checkedAll'>
                                </th>
                                <th>总排名</th>
                                <th>积分</th>
                                <th>名称</th>
                                <th>部门</th>
                                <th>账号</th>
                                <th>操作</th>
                            </tr>
                            <tbody>
                            <tr v-for="(user,index) in user_data">
                                <td>
                                    <input type="checkbox" name="exam_check" 
                                    v-model="user_ids" :value="user.id">
                                </td>
                                <td>{{index+1}}</td>
                                <td>{{user.integral}}</td>
                                <td>{{user.name}}</td>
                                <td>{{user.dep.dep_name}}</td>
                                <td>{{user.mobile}}</td>
                                <td>
                                    <div class="cell">
                                        <a href="" @click.prevent="is_adjust=1;exam_id=user.id;" 
                                        style="padding-right:5px;"> 
                                            <i class="fa fa-sliders"></i>
                                        </a>
                                    
                                        <a href=""  @click.prevent="GetExamUserInfo(user.id)" 
                                        style="padding-left:5px;"> 
                                            <i class="fa fa-list-alt"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div><!---->
            </div> <!-- table-responsive -->
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import axios from 'axios';
import XLSX from 'xlsx';

export default {
    name:'Ranking',
    data() {
        return {
            checked:'',     //全选
            token: window.localStorage.getItem('token'), // 获取token

            is_detail:'',   //积分详情
            is_adjust:'',   //是否调整积分
            is_many:false, //是否调整多条
            is_reset:'',
            is_upload:'',   //是否导出表格

            num_state:0,  //调整积分状态 1增加 2减少
            number:0,   // 积分数
            message:'', //报错
            exam_id:'',     //需要操作的成员id
            userinfo:{},
            user_data: new Array(), //成员列表
            user_detail:null,  //成员信息
            user_ids:[],    // 复选框成员id
        }
    },
    mounted(){
        // 获取成员列表
        axios({
            url:this.$api + '/user/examlistall',
            method:'GET',
            headers:{
                'authorization':this.token,  //携带token
            }
        }).then(res=>{
            if(res.data.code==200){
                this.user_data = res.data.user_data;    //成员列表
            }
        })
    },
    methods:{
        // 全选
        checkedAll() {
            if (this.checked) {//实现反选
            this.user_ids = [];
            } else { //实现全选
            this.user_ids = [];
            this.user_data.forEach( (item) => {
                this.user_ids.push(item.id);
            });
            }
        },
        // 获取成员信息
        GetExamUserInfo(exam_id){
            axios({
                url:this.$api + '/user/integral?exam_id='+exam_id,
                method:'GET',
                headers:{
                    'authorization':this.token,  //携带token
                }
            }).then(res=>{
                if(res.data.code==200){
                    this.userinfo = res.data.userinfo;    //成员
                    this.user_detail = res.data.userinfo.exam_int_id    //积分动态详情
                    this.is_detail = 1;
                }
            })
        },
        // 调整积分
        IntegralRegulator() {
            // 判断输入范围
            if (this.number>999 || this.number<1){
                this.message = '超出范围';
                return;
            }
            let form_data = new FormData();
            form_data.append('exam_id',this.exam_id);
            form_data.append('number',this.number);
            form_data.append('num_state',this.num_state);
            axios({
                url:this.$api + '/user/integral/',
                method:'POST',
                headers:{
                    'authorization':this.token,  //携带token
                },
                data:form_data,
            }).then(res=>{
                if(res.data.code==200){
                    // 获取成员列表
                    axios({
                        url:this.$api + '/user/examlistall',
                        method:'GET',
                        headers:{
                            'authorization':this.token,  //携带token
                        }
                    }).then(res=>{
                        if(res.data.code==200){
                            this.user_data = res.data.user_data;    //成员列表
                        }
                    })
                    this.is_adjust = 0;
                    this.number = null;
                    this.num_state = null;
                }
            })
        },
        // 判断是否有选中成员
        many(){
            if(this.user_ids.length==0){
                alert('您还没有选择任何人员');
                return;
            }
            this.is_adjust=true;
            this.is_many=true;
        },
        // 调整许多积分
        ManyIntegralRegulator(){
            // 判断输入范围
            if (this.number>999 || this.number<1){
                this.message = '超出范围';
                return;
            }
            let form_data = new FormData();
            form_data.append('user_ids',this.user_ids);
            form_data.append('number',this.number);
            form_data.append('num_state',this.num_state);
            axios({
                url:this.$api + '/user/many_integral/',
                method:'POST',
                headers:{
                    'authorization':this.token,  //携带token
                },
                data:form_data,
            }).then(res=>{
                if(res.data.code==200){
                    // 获取成员列表
                    axios({
                        url:this.$api + '/user/examlistall',
                        method:'GET',
                        headers:{
                            'authorization':this.token,  //携带token
                        }
                    }).then(res=>{
                        if(res.data.code==200){
                            this.user_data = res.data.user_data;    //成员列表
                        }
                    })
                    this.is_adjust = 0;
                    this.number = null;
                    this.num_state = null;
                    this.user_ids = [];
                }
            })
        },
        // 清空积分
        reset(){
            let form_data = new FormData();
            form_data.append('user_ids',this.user_ids);
            axios({
                url:this.$api + '/user/reset_integral/',
                method:'POST',
                headers:{
                    'authorization':this.token,  //携带token
                },
                data:form_data,
            }).then(res=>{
                if(res.data.code==200){
                    // 获取成员列表
                    axios({
                        url:this.$api + '/user/examlistall/',
                        method:'GET',
                        headers:{
                            'authorization':this.token,  //携带token
                        }
                    }).then(res=>{
                        if(res.data.code==200){
                            this.user_data = res.data.user_data;    //成员列表
                        }
                    })
                    this.is_adjust = 0;
                    this.number = null;
                    this.num_state = null;
                }
            })
        },
        upload(){
            let workbook = XLSX.utils.table_to_book(document.getElementsByClassName('upload_table')[0])
	        XLSX.writeFile(workbook, 'text.xlsx');
        }
    },
    watch: { //深度 watcher
        user_ids: {
            handler: function (val, oldVal) {
            if (this.user_ids.length === this.user_data.length) {
                this.checked=true;
            } else {
                this.checked=false;
                }
            },
            deep: true
        }    
    }

}
</script>

<style>
.form-group {
    margin-bottom: 0px;
}
</style>
